<template>
  <div class="tablets">
    <div class="box-top">
      <div
        class="grid"
        v-for="child in gridTotal"
        :key="child * 10000"
        @mouseenter="currentGridNumber = child"
        @mouseleave="currentGridNumber = 0"
        @click="handlerGlassSimpleInfo(null)"
      >
        <div class="rate">
          <div
            :class="'prenct' + gridNumber"
            :style="{
              background: `linear-gradient(to top, #f1f3f4, ${prenctColor})`,
              width: '7px',
            }"
          ></div>
        </div>
        <div class="glassList" v-if="glassData.hasOwnProperty(child)">
          <div
            class="glass"
            v-for="item in glassData[child]"
            :key="item.id"
            :style="{
              width: 380 * (item.furInWidth / gridWidth) + 'px',
              backgroundColor: colorType(item),
            }"
            @click.stop="handlerGlassSimpleInfo(item)"
            @dblclick="handlerGlassInfo(item)"
          ></div>
        </div>
      </div>
      <div class="gridNumber">
        {{ gridNumber }}
      </div>
      <div class="text2">
        <div class="el-icon-back"></div>
      </div>
      <div class="text3">
        <div class="el-icon-back"></div>
      </div>
    </div>
    <div class="box-bottom">
      <div class="zzl start" :style="{ color: prenctColor }">
        装载率:{{ rate }}%
      </div>
      <div class="zzl">数量{{ this.glassList.length }}</div>
      <div class="zzl end">当前格:{{ currentGridNumber }}</div>
    </div>
  </div>
</template>

<script>
import anime from "animejs";
import { glassColors } from "@/config/glassColor";
export default {
  props: {
    gridNumber: {
      type: Number,
      default: 0,
    },
    glassList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    gridWidth: {
      type: Number,
      default: () => {
        return 0;
      },
    },
    gridTotal: {
      type: Number,
      default: 50,
    },
  },
  data() {
    return {
      currentGridNumber: 0,
    };
  },
  methods: {
    colorType(glassData) {
      // 孔缺
      if (
        glassData.shelf != "补片" &&
        glassData.optGlass.processRequirements.length != 0
      )
        return glassColors[2].color;
      // 补片
      if (
        glassData.shelf == "补片" &&
        glassData.optGlass.processRequirements.length == 0
      )
        return glassColors[3].color;
      // 孔缺&补片
      if (
        glassData.shelf == "补片" &&
        glassData.optGlass.processRequirements.length != 0
      )
        return glassColors[4].color;
      // 白玻
      if (glassData.type.includes("白玻")) return glassColors[0].color;
      return glassColors[1].color;
    },
    handlerGlassSimpleInfo(e) {
      this.$emit("handlerClickEvent", e);
    },
    handlerGlassInfo(e) {
      this.$emit("handlerdbClickEvent", e);
    },
    EventAnime() {
      let that = this;
      this.$nextTick(() => {
        anime({
          targets: ".prenct" + that.gridNumber,
          height: ["0%", that.rate + "%"],
          duration: 1000,
          easing: "easeInOutQuad",
        });
      });
    },
  },
  computed: {
    glassData() {
      let ar = {};
      this.glassList.forEach((item) => {
        let grid = this.gridNumber > 6 ? (this.gridNumber - 7) *  23 + 300 : (this.gridNumber - 1) *  50;
        let gridValue = item.grid -  grid;
        if (!ar.hasOwnProperty(gridValue)) {
          ar[gridValue] = [];
        }
        ar[gridValue].push(item);
      });
      for (let key in ar) {
        ar[key].sort((a, b) => {
          return b.gridGroup - a.gridGroup;
        });
      }
      return ar;
    },
    rate() {
      return (
        Math.floor(
          (Object.keys(this.glassData).length / this.gridTotal).toFixed(2) * 100
        ) || 0
      );
    },
    prenctColor() {
      if (this.rate <= 60) return "#3692f4";
      if (this.rate > 60 && this.rate < 80) return "#fcc525";
      if (this.rate >= 80) return "red";
    },
  },
  mounted() {
    this.EventAnime();
  },
  watch: {
    rate() {
      this.EventAnime();
    },
  },
};
</script>

<style lang="scss" scoped>
.tablets {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 5px rgb(0 0 0 / 10%);
  .box-top {
    position: relative;
    max-height: 94%;
    height: 93%;
    width: 100%;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    justify-content: space-around;

    border: 5px solid #dee1e6;
    border-left: 7px solid #dee1e6;
    border-bottom: none;
    .rate {
      position: absolute;
      left: -7px;
      top: -5px;
      height: 107.6%;
      width: 7px;
      z-index: 999;
      display: flex;
      align-items: flex-end;
      .prenct {
        width: 7px;
      }
    }
    .gridNumber {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 200px;
      font-weight: bold;
      color: #e6e6e6;
      z-index: -1;
    }
    .text2 {
      position: absolute;
      left: -20px;
      bottom: -35px;
      // transform: translateY(-50%);
      font-size: 120px;
      font-weight: bold;
      color: #e6e6e6;
      z-index: -1;
      .el-icon-bottom {
        font-size: 100px;
      }
    }
    .text3 {
      position: absolute;
      display: flex;
      flex-direction: column;
      top: 10%;
      right: -20px;
      transform: translateY(-50%);
      font-size: 120px;
      font-weight: bold;
      color: #e6e6e6;
      z-index: -1;
    }
    .el-icon-right {
      font-size: 60px;
      font-weight: bold;
    }
  }
  .box-bottom {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #dee1e6;
    font-size: 16px;
    font-weight: bold;
    padding-left: 7px;
    background: linear-gradient(to right, #f1f3f4, #dee1e6);
  }
  .grid {
    width: 100%;
    height: 100%;
    //   background-color: blue;
    cursor: pointer;
    display: flex;
    // flex-direction: column;
    align-items: flex-end;
    border-bottom: 1px dashed black;
    .glassList {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row-reverse;
    }
    .text {
      position: absolute;
      bottom: 0px;
      max-width: 6px;
      transform: rotate(90deg) scale(0.5) translateX(5px) translateY(-2px);
      color: #fff;
      letter-spacing: 1px;
    }

    .glass {
      height: 100%;
      background-color: skyblue;
      margin: 0px 0px 0px 5px;
    }
  }
  .zzl {
    flex: 1;
    display: flex;
    justify-content: center;
    font-size: 1rem;
    letter-spacing: 1px;
  }
  .start {
    justify-content: flex-start;
  }
  .end {
    justify-content: flex-end;
  }
  .grid:hover {
    background-color: #eff1f2;
    // border: 1px solid black;
  }
  .glass:hover {
    background-color: yellow !important;
  }
}
</style>
